<template>
  <div class="page-cart pos-r w100vw h100vh">
    <header class="page-header flx-bm bgc14 px15 h60 bdb11-1px">
      <Logo />
      <div class="logo-link fz21 flx">
        <awe-icon url="/usr" name="user-circle-o" />
        <awe-icon url="/" class="ml9" />
      </div>
    </header>
    <section class="page-body pos-a t60 b50 l0 r0">
      <Cart v-model="tst" ref="cart" class="h100p over-s">
        <CartHeader class="bgc14">豆瓣豆品</CartHeader>
        <CartItem
          v-for="(i,n) in cart"
          :key="n"
          :count="i.itemCount"
          :val="i.sku_id"
          @num-change="onNumChange($event, n)"
        >
          <CartProCard :sku-data="i" v-if="i.sku"/>
        </CartItem>
      </Cart>
    </section>
    <footer class="page-footer pos-a b0 l0 w100p h50 flx-mm bgc14">
      <div class="flx-g-1 flx-bm px15">
        <div class="fwb">总计：</div>
        <div>
          <span class="fz10 clr5">不含运费</span>
          <span class="clr2 fwb fz16">￥{{totalPrice}}</span>
        </div>
      </div>
      <div class="w120 flx-mm clr14 h100p fwb" :class="tst.length?'bgc2':'bgc8'" @click="checkBill">
        {{checkBillTxt}}
      </div>
    </footer>
  </div>
</template>

<script>
    import AweIcon from 'assets/myTools/vueTools/com/common/awe-icon/awe-icon'
    import Logo from 'assets/myTools/vueTools/com/common/logo/logo'
    import Cart from 'assets/myTools/vueTools/com/common/cart2/cart/cart'
    import CartHeader from 'assets/myTools/vueTools/com/common/cart2/cart-header/cart-header'
    import CartItem from 'assets/myTools/vueTools/com/common/cart2/cart-item/cart-item'
    import CartProCard from 'components/cart/cart-pro-card'
    import { myTools } from 'assets/myTools/jsTools/jsTools'
    export default {
      components: {
        AweIcon,
        Logo,
        Cart,
        CartItem,
        CartProCard,
        CartHeader
      },
      data() {
        return {
          cart: [],
          tst: [],
          totaoPrice: 0
        }
      },
      computed: {
        checkBillTxt(){
          let count = 0
          this.tst.forEach(i=>{
            this.cart.forEach(j=>{
              if(i === j.sku_id){
                count = count + j.itemCount
              }
            })
          })
          return this.tst.length ? ('结算(' + count + ')') : '请选择'
        },
      },
      watch: {
        tst: {
          immediate: true,
          handler () {
            this.totalPri()
          }
        }
      },
      async beforeMount () {
        const uid = myTools.getSession('usr').uid
        this.cart = await this.getUsrCart(uid)
        for (const i of this.cart) {
          const obj = await this.getSkuData(i.sku_id)
          this.$set(i, 'sku', obj)
        }
        this.totalPri()
      },
      methods: {
        totalPri(){
          let total = 0
          this.tst.forEach(i=>{
            this.cart.forEach(j=>{
              if(i === j.sku_id){
                total += j.itemCount * j.sku.price
              }
            })
          })
          this.totalPrice = total
        },
        async getUsrCart (uid) {
          /*const { status, data } = await this.$axios.post('/usr/getUsrCart', {
            params: {
              uid
            }
          })*/
		  const { status, data } = await this.$axiosApi.postUsrCart({
              uid
          })
          if (status === 200 && data.code === 0) {
            return data.data
          }
        },
        async getSkuData (skuid) {
          const { status, data } = await this.$axiosApi.postUsrCartSkuDetail({
              skuid
          })
          if (status === 200 && data.code === 0) {
            return data.data
          }
        },
        async onNumChange(x, n){
          const uid = myTools.getSession('usr').uid
          let {status, data} = await this.$axiosApi.postUsrCartSetUsrCartCount({
              uid: uid,
              skuid: this.cart[n].sku_id,
              count: x
          })
          if(status === 200 && data.code === 0) {
            this.cart[n].itemCount = x
          }else{
            console.log('cart change num error')
          }
        },
        checkBill() {
          this.tst.length && (window.location = `/checkBill?uid=${myTools.getSession('usr').uid}&from=cart`)
        }
      }
    }
</script>

<style scoped>

</style>
